<template>
  <div>
    <div v-if="this.$route.name == 'devicemg'" class="app-container">
      <vue-element-loading
        :active="this.$store.state.elementloading.vueElementLoading"
        spinner="spinner"
        color="#FF6700"
      />
      <el-card shadow="never">
        <el-form
          ref="searchForm"
          :inline="true"
          :model="searchMap"
          style="margin-top: 20px;margin-left: 0px"
        >
          <el-form-item prop="deviceName" style="margin-left:12px !important">
            <el-input @keyup.enter.native="searchdevice" v-model.lazy="searchMap.deviceName">
              <template slot="prepend">设备名称</template>
            </el-input>
          </el-form-item>
          <el-button @click="searchdevice" icon="el-icon-search"></el-button>
        </el-form>

        <el-button-group style="margin-bottom:20px;margin-left:12px !important">
          <el-button
            v-if="btnshow('devicemg-add')"
            @click="openNew"
            size="small"
            type="primary"
            icon="el-icon-plus"
          ></el-button>
          <el-button
            v-if="btnshow('devicemg-update')"
            @click="handleEdit(radio)"
            size="small"
            type="primary"
            icon="el-icon-edit"
          ></el-button>
          <el-button
            v-if="btnshow('devicemg-delete')"
            @click="handleDelete(radio)"
            size="small"
            type="primary"
            icon="el-icon-delete"
          ></el-button>
        </el-button-group>
        <vue-element-loading
          :active="this.$store.state.elementloading.vueElementLoading"
          spinner="spinner"
          color="#FF6700"
        />
        <template>
          <el-table
            @row-dblclick="openDetails"
            @row-click="chooseone"
            max-height="500"
            :data="list"
            border
            style="width: 98% !important;margin-left:12px !important"
            highlight-current-row
            @current-change="handleSelectionChange"
          >
            <el-table-column width="55">
              <template slot-scope="scope">
                <el-radio v-model="radio" :label="scope.row.id">
                  <span class="el-radio__label"></span>
                </el-radio>
              </template>
            </el-table-column>
            <!-- type="index"获取索引值，labal显示标题，prop 数据字段名 -->
            <el-table-column align="center" prop="tName" label="设备名称" width="500"></el-table-column>
            <el-table-column align="center" prop="tSerialNumber" label="设备编号" width="300"></el-table-column>
            <el-table-column align="center" prop="tRemarks" label="备注"></el-table-column>
          </el-table>
        </template>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>

        <!-- 新增、编辑弹窗 -->
        <el-dialog
          :close-on-click-modal="false"
          :before-close="handleDialogClose"
          v-dialogDrag
          :title="title"
          :visible.sync="editdataDialog"
          width="30%"
        >
          <add-new
            ref="feditForm"
            @fselect="searchBydeviceName"
            @close="closeEditor"
            :isEdit="isEdit"
            :addnewData.sync="fpojo"
          ></add-new>
          <span slot="footer" class="dialog-footer">
            <el-button @click="closeEditor">取 消</el-button>
            <el-button @close="closeEditor" type="primary" @click="addData">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 提示是否删除 -->
        <!-- <el-dialog title="提示" :visible.sync="deletedialog" width="30%" center>
      <span>是否删除名为{{backup.tName}}的设备</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancleDelete">取 消</el-button>
        <el-button type="primary" @click="ensureDelete(radio)">确 定</el-button>
      </span>
        </el-dialog>-->
      </el-card>
    </div>
    <router-view/>
  </div>
</template>

<script src="./devicemg.js"></script>
<style src="./devicemg.css" scoped></style>

